<section>
  <h5 class="text-muted">Custom View Position and custom select<!--自定义区域方向和选中--></h5>
  <div class="row">
    <div class="col-md-5">
      <d-select
        [placeholder]="'Standard Input'"
        [options]="options"
        [multiple]="true"
        [customViewTemplate]="myTemplate"
        [customViewDirection]="'right'"
        [direction]="'auto'"
      ></d-select>
    </div>
  </div>
</section>
<section>
  <h5 class="text-muted">Custom View and align with appendToBody option<!--自定义区域和通过appendToBody改变宽度对齐--></h5>
  <div class="row">
    <div class="col-md-3">
      <d-select
        [placeholder]="'Standard Input'"
        [options]="options"
        [multiple]="true"
        [customViewTemplate]="myTemplate"
        [customViewDirection]="'left'"
        [width]="'500px'"
        [appendToBody]="true"
        [appendToBodyDirections]="['leftDown', 'leftUp']"
      ></d-select>
    </div>
  </div>
</section>
<section>
  <h5 class="text-muted">Custom Area<!--自定义区域--></h5>
  <div class="row">
    <div class="col-md-5">
      <d-select
        [placeholder]="'Standard Input'"
        [options]="options"
        [multiple]="true"
        [customViewTemplate]="myTopTemplate"
        [customViewDirection]="'top'"
      ></d-select>
    </div>
  </div>
</section>

<ng-template #myTemplate let-selectComponent let-choose="choose">
  <div class="custom-wrapper">
    <div class="custom-title">Custom View Position: Top<!--自定义区域方向: top--></div>
    <ul class="custom-box">
      <li class="custom-list" *ngFor="let recent of recently; let i = index">
        <div class="custom-single" (click)="chooseRecent($event, i, choose)">
          {{ recent }}
        </div>
      </li>
    </ul>
  </div>
</ng-template>

<ng-template #myTopTemplate let-selectComponent>
  <!-- <div class="total">已选 {{ selectComponent?.multiItems?.length || 0 }} 项</div> -->
  <div class="total">Already select {{ selectComponent?.multiItems?.length || 0 }} item(s)</div>
</ng-template>
